<!DOCTYPE html>
<html>
<head>
    <title>Infinite Potential Well</title>
</head>
<body>
<canvas id="potentialWellCanvas" width="500" height="400"></canvas>

<script>
    const canvas = document.getElementById('potentialWellCanvas');
    const ctx = canvas.getContext('2d');

    // --- Style and Layout Parameters ---
    const bgColor = '#FFFFFF';
    const fgColor = '#000000';
    const axisWidth = 1.5;
    const wallWidth = 1.5;
    const hatchWidth = 1.2;
    const fontStyle = 'italic 20px Times New Roman';

    // Define coordinate system from canvas dimensions
    const margin = 50;
    const canvasWidth = canvas.width;
    const canvasHeight = canvas.height;
    
    // Origin (O) in canvas coordinates
    const originX = margin + 10;
    const originY = canvasHeight - margin;

    // Axis lengths
    const xAxisLength = canvasWidth - originX - margin;
    const yAxisLength = originY - margin;

    // Position of 'a' on the x-axis
    const aCoordX = originX + xAxisLength * 0.6;
    
    // Height of the potential walls (for drawing purposes)
    const wallHeight = yAxisLength * 0.9;
    
    // Arrowhead size
    const arrowSize = 8;
    
    // --- Drawing Functions ---

    // Function to draw axes
    function drawAxes() {
        ctx.lineWidth = axisWidth;
        
        // X-axis
        ctx.beginPath();
        ctx.moveTo(originX - 10, originY); // Start slightly left of origin for clean join
        ctx.lineTo(originX + xAxisLength, originY);
        ctx.stroke();
        // Arrowhead for X-axis
        ctx.beginPath();
        ctx.moveTo(originX + xAxisLength, originY);
        ctx.lineTo(originX + xAxisLength - arrowSize, originY - arrowSize / 2);
        ctx.lineTo(originX + xAxisLength - arrowSize, originY + arrowSize / 2);
        ctx.closePath();
        ctx.fill();

        // Y-axis (also the first wall)
        ctx.beginPath();
        ctx.moveTo(originX, originY);
        ctx.lineTo(originX, originY - yAxisLength);
        ctx.stroke();
        // Arrowhead for Y-axis
        ctx.beginPath();
        ctx.moveTo(originX, originY - yAxisLength);
        ctx.lineTo(originX - arrowSize / 2, originY - yAxisLength + arrowSize);
        ctx.lineTo(originX + arrowSize / 2, originY - yAxisLength + arrowSize);
        ctx.closePath();
        ctx.fill();
    }

    // Function to draw potential walls
    function drawWalls() {
        ctx.lineWidth = wallWidth;

        // The first wall at x=0 is the Y-axis, already drawn.
        // We just need to draw the second wall at x=a.
        ctx.beginPath();
        ctx.moveTo(aCoordX, originY);
        ctx.lineTo(aCoordX, originY - wallHeight);
        ctx.stroke();
    }
    
    // Function to draw hatches on a wall
    function drawHatches(x_pos) {
        ctx.lineWidth = hatchWidth;
        const hatchSpacing = 12;
        const hatchLength = 6;
        const numHatches = Math.floor(wallHeight / hatchSpacing);
        for (let i = 1; i < numHatches; i++) {
            const y = originY - i * hatchSpacing;
            ctx.beginPath();
            ctx.moveTo(x_pos, y);
            // Hatches point down and to the left
            ctx.lineTo(x_pos - hatchLength, y + hatchLength);
            ctx.stroke();
        }
    }

    // Function to draw labels
    function drawLabels() {
        ctx.font = fontStyle;
        
        // Label 'U'
        ctx.textAlign = 'right';
        ctx.textBaseline = 'middle';
        ctx.fillText('U', originX - 10, originY - yAxisLength);
        
        // Label 'O'
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.fillText('O', originX, originY + 5);
        
        // Label 'x'
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';
        ctx.fillText('x', originX + xAxisLength + 5, originY);
        
        // Label 'a'
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.fillText('a', aCoordX, originY + 5);
    }

    // --- Main Drawing Execution ---
    
    // 1. Clear canvas and set background
    ctx.fillStyle = bgColor;
    ctx.fillRect(0, 0, canvasWidth, canvasHeight);

    // 2. Set drawing color
    ctx.strokeStyle = fgColor;
    ctx.fillStyle = fgColor;

    // 3. Draw components
    drawAxes();
    drawWalls();
    drawHatches(originX);
    drawHatches(aCoordX);
    drawLabels();

</script>
</body>
</html>